CSS 属性计算过程

总的来讲，属性值的计算过程，分为如下这么 4 个步骤:

确定声明值

所谓声明值就是作者自己所书写的 CSS 样式, 例如:

1
2
3

p {
    color: red;
}

这里我们声明了 p 元素为红色，那么就会应用此属性设置。

当然，除了作者样式表，一般浏览器还会存在 用户代理样式表 User agent Stylesheet (即浏览器默认的样式表), 简单来讲就是浏览器内置了一套样式表。

![元素样式](E:_Project_git仓库\ImageHost\ImageHost\CSS 属性计算过程\2022-08-13-063500.png)

在图中，作者样式表中设置了 color 属性，而用户代理样式表中设置了像这些值：

{
    display
    margin-block-start
    margin-block-end
    margin-inline-start
    margin-inline-end
}

这些值目前来讲也没有什么冲突，因此最终就会应用这些属性值。

在确定声明值时，可能出现一种情况，那就是声明的样式规则发生了冲突。

此时会进入解决层叠冲突的流程。而这一步又可以细分为下面这三个步骤：

整体来讲有三种来源：

对应的重要性顺序依次为：页面作者样式 > 用户样式 > 用户代理样式

更详细的来源重要性比较，可以参阅 MDN：CSS 层叠样式表 CSS层叠

源的重要性是相同的，此时会以 选择器的权重 来比较重要性

.test h1{
font-size: 50px;
}

h1 {
font-size: 20px;
}

很明显，上面的选择器的权重要大于下面的选择器，因此最终标题呈现为 50px。

在浏览器中可以看到，落败的作者样式在 Elements>Styles 中会被划掉。

关于选择器的权重计算方式，可以查阅 MDN：CSS：层叠样式表 - 优先级

注意：以下的选择器对优先级没有影响

通配选择器 *

关系选择器

+ 接续兄弟组合器

> 子组合器

~ 后续兄弟选择器

" " 后代选择器(一个空格)

|| 列组合器

否定伪类 :not (但是，在 :not() 内部声明的选择器会影响优先级)。

这一步判断和确定的是，样式声明既是同源，权重也相同的情况下, 比较样式声明的次序

h1 {
font-size: 50px;
}

h1 {
font-size: 20px;
}

此时位于下面的样式声明会层叠掉上面的那一条样式声明，最终会应用 20px 这一条属性值

层叠冲突这一步完成后，解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。

那么没有声明的属性呢？此时还有第三个步骤，那就是使用继承而来的值。

1
2
3

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

1
2
3

div {
  color: red;
}

在上面的代码中，我们针对 div 设置了 color 属性值为红色，而针对 p 元素我们没有声明任何的属性
但是由于 color 是可以继承的，因此 p 元素从最近的 div 身上继承到了 color 属性的值

有两点需要注意，一个是属性可以继承，一个是最近的元素：